<template>
  <div>
    <a-modal
      ref="projecteditRef"
      v-model:visible="visible"
      :title="labelEdit"
      @ok="handleOk"
    >
      <a-form
        ref="projecteditForm"
        name="projectedit"
        :model="projectEdit"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="on"
        @finish="onFinish"
      >
        <a-form-item
          label="项目名称"
          name="projectname"
          :rules="[{ required: true, message: '请填写项目名称!' }]"
        >
          <a-input v-model:value="projectEdit.projectname" class="projectInput" />
        </a-form-item>

        <a-form-item
          label="对方单位"
          name="clientcompany"
          :rules="[{ required: true, message: '请填写对方单位名称!' }]"
        >
          <a-input v-model:value="projectEdit.clientcompany" class="projectInput" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, toRefs } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { save } from '@/api/base/project/project';
  import { APP_USER } from '@/enums/cacheEnum';
  import { Storage } from '@/utils/Storage';

  const props = defineProps<{
    labelEdit: string;
  }>();

  //表单标题
  const title = ref('');
  const visible = ref(true);

  //表单参数
  const projectEdit = reactive({
    projectname: '',
  });
  const projecteditForm = ref();

  //表单title
  const { labelEdit } = toRefs(props);
  //提交表单
  const onFinish = (value: any) => {
    console.log('sadjad', value);
  };

  const handleOk = () => {
    projecteditForm.value
      .validate()
      .then(async () => {
        const param = {
          projectname: projectEdit.projectname,
          clientcompany: projectEdit.clientcompany,
          tenantid: ref(Storage.Get(APP_USER).tenantid).value,
        };
        await save(param).then((res) => {
          if (res.code == 0) {
            message.success('项目新增成功');
            projectEdit.projectname = '';
            projectEdit.clientcompany = '';
            visible.value = false;
          } else {
            message.error('项目新增失败');
          }
        });
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  //处理父组件按钮事件
  const handelEdit = () => {
    visible.value = true;
    console.log('子组件被调用');
  };


  // 主动暴露childMethod方法
  defineExpose({ handelEdit });
  defineOptions({
    name: 'ProjectEdit',
  });
</script>
<style lang="less" scoped>
  .projectInput {
    width: 50%;
  }
</style>
